<template>
  <div class="center-login-box ">
    <div class="login-box">
      <div class="login-inner">
        <div class="logo"><img src="~@/assets/logo.png"></div>
        <h1 class="title">后台管理</h1>
        <el-form :model="dataForm" :rules="dataRule" ref="form" @keyup.enter="dataFormSubmit()" status-icon>
          <el-form-item prop="userName">
            <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="dataForm.password" type="password" placeholder="密码" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import Cookies from 'js-cookie'
import { loginApi } from '@/api/user'
import { LoginParams } from '@/api/user/model'

const router = useRouter()
const dataForm = reactive({
  userName: '',
  password: ''
})
const dataRule = reactive({
  userName: [
    { required: true, message: '帐号不能为空', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' }
  ]
})
function dataFormSubmit() {
  loginApi(<LoginParams>{
    username: dataForm.userName,
    password: dataForm.password
  }).then(({ data }) => {
    router.push({ name: 'home' })
    Cookies.set('token', data.token)
  })
}
</script>
<style lang="scss" scoped>
.center-login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: #4a827c;
  .login-box {
    position: relative;
    width: 400px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 12px 3px #184944;
    border-radius: 10px;
    &::before {
      position: absolute;
      content: '';
      width: 120px;
      height: 120px;
      top: -30px;
      padding: 20px 0;
      border-radius: 50%;
      box-shadow: 0 0 12px 3px #184944;
      background-color: #184944;
      z-index: 0;
    }
    .login-inner {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      background: #184944;
      z-index: 1;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .logo {
        width: 110px;
        height: 110px;
        background: #fff;
        border-radius: 50%;
        z-index: 2;
        margin: 10px;
        margin-top: -60px;
        img {
          width: 100%;
          padding: 20px;
        }
      }
      .title {
        text-align: center;
        color: #f6f6f6;
      }
      .el-form {
        margin-top: 50px;
        width: 100%;
      }
      .login-btn-submit {
        display: block;
        width: 100%;
      }
    }
  }
}
</style>
